<template>
    <div class="app-container">
      <el-form :rules="rules" ref="form" :model="form" label-width="90px" style="width:300px;">
        <el-form-item label="原始账户" prop="userName">
          <el-input v-model="form.userName" class="test"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="form.password" type="password" autocomplete="off" auto-complete="new-password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit" :loading="btnLoading">确定</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import { addUser } from '@/api/account'
  export default {
    data() {
      const validatePass = (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能小于6位'))
        } else {
          callback()
        }
      }
      const validateUserName = (rule, value, callback) => {
        if (value.length < 4) {
          callback(new Error('用户名不能小于4位'))
        } else {
          callback()
        }
      }
      return {
        passwordNew: '',
        btnLoading: false,
        form: {
          userName: '',
          password: ''
        },
        rules: {
          userName: [{ required: true, message: '请填写登录账户', trigger: 'change', validate: validateUserName }],
          password: [{ required: true, trigger: 'change', validator: validatePass }]
        }
      }
    },
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    created() {
      this.form.id = this.token
    },
    methods: {
      onSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.btnLoading = true
            addUser(this.form).then(response => {
              this.btnLoading = false
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
            }).catch(() => {
              this.btnLoading = false
            })
          }
        })
      },
      onCancel() {
        this.$refs['form'].clearValidate()
      }
    }
  }
  </script>
  
  <style scoped>
  </style>
